<template>
  <div class="lineCharts" ref="lineCharts"></div>
</template>

<script>
import * as echarts from "echarts";
let options = {
  grid: {
    bottom: 20,
    left: 32,
    right: 32,
    top: 20,
  },
  xAxis: {
    boundaryGap: false,
    type: "category",
    axisLabel: {
      show: true,
      textStyle: {
        color: "#3274BB",
      },
    }, //刻度标签
    axisLine: {
      show: false,
    }, //轴线样式
    axisTick: {
      show: false,
    }, //坐标轴刻度
    data: ["2023-10-15", "2023-10-17", "2023-10-19", "2023-10-21"],
  },
  yAxis: {
    axisLabel: {
      show: true,
      textStyle: {
        color: "#3274BB",
      },
    }, //刻度标签
    axisLine: {
      show: false,
    }, //轴线样式
    splitLine: {
      show: false,
    }, //显示分隔线
    axisTick: {
      show: false,
    }, //坐标轴刻度
    type: "value",
  },
  series: [
    {
      data: [120, 90, 65, 40],
      type: "line",
      smooth: false,
      showSymbol: false,
      itemStyle: {
        color: "#2661AC",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#2661AC",
          },
          {
            offset: 1,
            color: "#6EC6D5",
          },
        ]),
      },
    },
  ],
};
export default {
  props: {
    echartsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      this.chart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.lineCharts {
  width: 100%;
  height: 100%;
}
</style>
